<template>
  <footer>
    <div v-for="(item, index) in foots" :key="index">
      <router-link :to="{ name: item.name }">
        <i class="iconfont" :class="item.icon"></i>
        <span>{{ item.text }}</span>
        <van-tag
          v-if="item.hot"
          :color="$route.name == item.name ? '#ff5f16' : '#999'"
          class="hot"
          >{{ num }}</van-tag
        >
      </router-link>
    </div>
  </footer>
</template>

<script lang="ts" setup>
import { useDataStore } from "../store/data";
import { toRefs, computed } from "vue";

const dataStore = useDataStore(); // proxy 、

const {
  carNum, // refs 数据
} = toRefs(dataStore);

const {
  changeCarNum, // JS方法
  // carNum  // JS 数据   没有数据响应式
} = dataStore;

const num = computed<number>(() => dataStore.carNum); // ref数据

const foots: Array<ActionType> = [
  {
    path: "/shop/home",
    name: "home",
    text: "首页",
    icon: "icon-home2",
  },
  {
    path: "/shop/find",
    name: "find",
    text: "分类",
    icon: "icon-gengduo",
  },
  {
    path: "/shop/cart",
    name: "cart",
    text: "购物车",
    icon: "icon-shangpin",
    hot: true,
  },
  {
    path: "/shop/mine",
    name: "mine",
    text: "我的",
    icon: "icon-custom-my",
  },
];
</script>

<style lang="scss" scoped>
@import "../styles/foot.scss";
@import "../styles/fonts/iconfont.css";
</style>